<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #container{
        border: 5px solid red;
        /* height: 100px; */
        /* display: inline-block; */
        /* overflow: hidden; */
        
        
    }
    .box{
        width: 200px;
        height: 100px;
        background: pink;
        /* display: inline-block; */
        /* display: inline; */
        /* inline:行元素，display:inline-size：块元素变成行元素的展示方式 */
        /* 行元素特点：由内容决定，内容占多大行元素就多大 */
        /* display:inline-block :使块元素又能横过来又能有宽高 */
        /* 缝隙是换行导致，块元素变成行元素后，相当于文字，文字之间有空隙 */
        float: left;
        /* 浮动后的元素，脱离文档流，原本所占的空间释放
           子元素浮动后，父元素高度塌陷 */
    }
    /* .clear{
        clear: both;
    } */
    .clearfix::after{
        content: "";
        clear: both;
        display: block;
    }
    /* 未生效是因为div是块元素，after是行元素，要将块元素变成行元素 */
    </style>
    
</head>
<body>
    <div id="container" class="clearfix">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <!-- <div class="clear"></div> -->
    </div>
</body>
</html>